<template>
  <el-card>
    <h5>添加账号</h5>
    <div class="revamppsd">
      <p>
        <span>账号</span>
        <el-input
          v-model="username"
          style="width: 240px; height: 30px"
        ></el-input>
      </p>
      <p>
        <span>密码</span>
        <el-input
          v-model="pad"
          show-password
          style="width: 240px; height: 20px"
        ></el-input>
      </p>
      <p>
        <span>用户组</span>
        <el-select
          style="width: 240px"
          v-model="value"
          filterable
          placeholder="选择组户"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </p>
    </div>

    <div class="confirm">
      <el-button type="primary" style="width: 80px" @click="addBtn"
        >添加</el-button
      >
      <el-button style="width: 80px" @click="resetBnt">重置</el-button>
    </div>
  </el-card>
</template>

<script>
import { adduser } from "@/apis/user";
export default {
  data() {
    return {
      username: "",
      pad: "",
      options: [
        {
          value: "超级管理员",
          label: "超级管理员",
        },
        {
          value: "普通管理员",
          label: "普通管理员",
        },
      ],
      value: "普通管理员",
    };
  },
  methods: {
    addBtn() {
      adduser({
        account: this.username,
        password: this.pad,
        userGroup: this.value,
      }).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            showClose: true,
            message: "添加成功",
            type: "success",
          });
          this.username = "";
          this.pad = "";
        }
      });
    },
    resetBnt() {
      this.pad = "";
      this.username = "";
      this.value = "普通管理员";
    },
  },
};
</script>

<style lang="less" scoped>
h5 {
  font-size: 15px;
  line-height: 40px;
  padding-left: 20px;
  font-weight: normal;
  border-bottom: 1px solid rgb(235, 232, 232);
}
.revamppsd {
  margin: 15px 20px;
  width: 300px;
  p {
    justify-content: space-between;
    margin-top: 20px;
    text-align: left;
    display: flex;
    span {
      text-align: right;
      line-height: 38px;
      font-size: 14px;
      color: #455a64;
    }
  }
}
.confirm {
  margin: 20px 0 0 80px;
}

.el-card {
  background-color: #fff;
  height: 360px;
}
</style>